| 打造开箱即用的 react 移动端框架 | 您所在的位置：网站首页 › antd mobile loading › 打造开箱即用的 react 移动端框架 |
打造开箱即用的 react 移动端框架
|
本文已参与「新人创作礼」活动，一起开启掘金创作之路。 前言如果你使用 React，或者想要学习 React，还在为 create-react-app 的各种配置而烦恼，对项目配置等有疑惑，或许这篇文章能够帮助你~ 如果对你有帮助，请一定不要吝惜你的 Star~ 在移动端常常会遇到缓存页面的问题，vue中有 keep-alive 解决，而在 React 中使用 react-keeper 就能完美解决这个问题，并且使用上更加方便简洁 ant mobile 由 v2 升级到 v5 ，是时候更新一波了~ 如果有小伙伴对 dva 不太理解，可在语雀上看详细使用文档，从最直观的角度来讲，dva 相比于 redux 更加简洁，使用起来更加方便🎉 react 移动端开发脚手架，技术栈 react(hook) + antd moblie + typescript + react-keeper + dva 该脚手架基于 create react app 创建，方便快速搭建 react 移动端项目 gitHub: react-mobile 在线地址：react-mobile-Domesy 语雀 React 移动端 入门实战 另外有对PC端刚兴趣的小伙伴推荐一波 Ant Design Pro V5 入门实战 基础配置我们先使用npx创建项目 npx create-react-app react-mobile(文件名) 接下来我们就 react-mobile 进行对应的配置 (此时的是兼容 eslint 的) 如果要创建ts的话，只需要修改下命令即可(ts） npx create-react-app react-mobile(文件名) --template typescript 1.创建项目配置文件插件 react-app-rewired customize-cra 执行命令 npm install react-app-rewired customize-cra --save 作用： 在不 eject 的情况下，覆盖 create-react-app 的配置形成 config-overrides.js 配置： 在 package.json 中的 script 下的 react-scripts 替换为 react-app-rewired 即可 { ... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, ... }然后在更目录下创建 config-overrides.js 文件，以后所有的配置就在此文件中 const { override } = require('customize-cra'); module.exports = override( ); 2.配置less文件插件 less less-loader 执行命令： yarn add less less-loader -D 作用： 支持 Less文件配置：在 config-overrides.js 文件 const { addLessLoader } = require('customize-cra'); module.exports = override( ..., addLessLoader({ lessOptions: { javascriptEnabled: true, modifyVars: { //全局公用样式，可以将此文件提出，专门做一个配置文件 '@primary-color': '#1DA57A' }, localIdentName: '[local]--[hash:base64:5]' // 自定义 CSS Modules 的 localIdentName } }), ... ); 3.压缩js、css插件 compression-webpack-plugin 执行命令 yarn add compression-webpack-plugin -D 作用： 压缩js、css 配置 在 config-overrides.js 文件 说明： 为了更好的配置，我们将分为开发模式和打包模式，我们只需要配置对应的打包模式即可，另外，默认的算法为 gzip 如果有更改可自行更改 const CompressionWebpackPlugin = require('compression-webpack-plugin'); //配置开发模式和打包模式 const addCustomize = () => config => { // 打包模式 if(process.env.NODE_ENV === 'production') { config.devtool = false; //去除map文件 // 添加js打包gzip配置 config.plugins = [...config.plugins, new CompressionWebpackPlugin({ test: /.js$|.css$/, // 压缩js与css threshold: 1024, // 只处理比这个值大的资源，单位字节 })] } else if(process.env.NODE_ENV === 'development'){ } return config } module.exports = override( ..., addCustomize() ); 4.配置独具一格的小玩意作为一个程序员，我们可以让所在的项目加一点小玩意，就好比特定的标识，那么我们也给这个项目加点独具一格的小玩意吧~ 结合 node.js 我们让这个项目打包的时候加入 DOMESY 吧😄 插件 clear: 清屏 chalk: 装饰作用，使之终端上的输出加上颜色 figlet: 作用是将字母转化为图片，使之更加醒目 使用命令 yarn add figlet clear chalk@^4.1.0 -S 配置 在 addCustomize 里配置就行 // 配置开发模式和打包模式 const addCustomize = () => config => { // 打包模式 if(process.env.NODE_ENV === 'production') { ... const { promisify } = require('util'); const clear = require('clear') const chalk = require('chalk') const figlet = promisify(require('figlet')) clear() const log = content => console.log(chalk.blue(content)) figlet('DOMESY !').then(res => log(res)) ... } else if(process.env.NODE_ENV === 'development'){ } return config }这里注意下 chalk 为 '^4.1.0'的版本 来让我们看下效果吧~ 在这里我们选择的组件库为 ant-desgin-mobile，这个组件库最近才进行更新，直接从 V2 跳到了 V5~,所以基本V2的所有组件都无法用，当然官方给出了点迁移指南~， 详情请看：Ant Design Mobile 迁移指南 插件 antd-mobile 执行命令 yarn add antd-mobile@next 然后直接引入就可以了 import { Button } from 'antd-mobile' retrun ( Primary ) 6. 单位转化大家都知道，在 PC 端中， css 是以 px 为单位，而在移动端中 是以 rem 为单位，如果做移动端，要进行 px 转化为 rem， 那么就会很麻烦，这是就需要一个插件 自动将其转化 必须在 less 文件中起作用，行内样式无用 插件 postcss-px2rem-exclude lib-flexible 作用：将px自动转化为rem 执行命令： yarn add postcss-px2rem-exclude lib-flexible -S 配置 lib-flexible 我们只需要在 index.js 中引入 import 'lib-flexible 配置postcss-px2rem-exclude 为方便起见，我们只要在 打包模式配置即可，这样在开发模式的单位就还是 px了 module.exports = override( ..., process.env.NODE_ENV === 'production' ? addPostcssPlugins([require("postcss-px2rem-exclude")({ remUnit: 37.5, exclude: /node_modules/i })]) : null, addDecoratorsLegacy(), ... );注意： 为方便调试，只在打包模式使用，开发模式不适用 页面需要配置，通常H5以375为标准 7.去除eslint警告删除esLint,在 package.json 中的 "eslintConfig" 配置规则 { ..., "eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "rules": { "no-undef": "off", "no-restricted-globals": "off", "no-unused-vars": "off" } }, ... }同时，我们可以引入 disableEsLint const { disableEsLint } = require('customize-cra'); module.exports = override( ... disableEsLint(), //忽略eslint警告 ); 8.配置别名只需要在 customize-cra 中引出 addWebpackAlias即可 const { override, addWebpackAlias } = require('customize-cra'); module.exports = override( ..., addWebpackAlias({ ["@/"]: path.resolve(__dirname, "src/") }), ... );如果是ts的话，文件内还是无法识别别名，需要在 tsconfig.json 中进行配置一下 在tsconfig.json { "extends": './paths.json', ... } 在 path.json 中 { "compilerOptions": { "baseUrl": "src", "paths": { "@/*": [ "*" ] } } }这样就不会报错了 9.分模块打包在内置中分为开发环境和生成环境，对应的分别为 production 和 development 模式 当然这些在 process.env 下 在开发中我们有各种各样的环境，一般公司至少有 测试环境 和 正式环境，在好一点的有灰度环境 每个环境对应的接口域名是不同的，但我们对应的包 其实办法有很多，最low的设置一个变量手动切换，在 之上通过监测地址栏进行打包（这种非常有限制，地址换需要改代码~，也比较low） 那么有没有更好的方法呢？我们希望通过名令去打对应环境的包，这样就回很方便 插件：cross-env 执行命令 yarn add cross-env 配置：在 package.json { ..., "scripts": { "start": "react-app-rewired start ", "start:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start", "build": "react-app-rewired build", "starbuildt:pre": "cross-env REACT_APP_ENV=pre react-app-rewired start ", "test": "react-app-rewired test", "eject": "react-scripts eject" }, ... }这样就ok了 你只需要执行 yarn run start:pre 就OK了 此时你的环境变量就会多一个 REACT_APP_ENV = pre的，我们就可以以这个变量作为判断的标准，进行分模块打包了 我们打印下 process.env 装饰器不用多说，只能用于 class 组件，当然这里推崇使用 Hook，但为了有使用 class 的小伙伴，也就直接把装饰也配置上吧~ 插件： @babel/plugin-proposal-decorators 执行命令 yarn add @babel/plugin-proposal-decorators const { override, addDecoratorsLegacy } = require('customize-cra'); module.exports = override( ..., addDecoratorsLegacy(), ... ); 11.配置打包分析我们可以根据写完的页面进行打包大小的分析 插件：webpack-bundle-analyzer 执行命令 yarn add webpack-bundle-analyzer 打包后会在 build 下生成一个静态报告文件 report.html, 而不是启动一个 web 服务 const { override, addWebpackPlugin } = require('customize-cra'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') module.exports = override( ..., process.env.NODE_ENV === 'production' ? addWebpackPlugin( new BundleAnalyzerPlugin({ analyzerMode: 'static' ) : undefined ); 12.其他事项 打包的时候无法正常显示，需要在 package.json 中配置 “homepage”: "." 即可 { ..., "homepage": ".", ... } 将 public 中的 index.html 改为本文仅提供参考，若有不对的地方，欢迎在评论区留下您宝贵的意见 其他文章： 打造开箱即用的 react 移动端框架（二） 打造属于你的Ant Design Pro V5 一些常见的Dom操作，仅用一个 Hook 就能轻松得到？ 一万余字概括ES6-ES12全部新特性 |
【本文地址】